<template>
	<view class="page-view is-flex">
		<nav-view :defaultShow="true" ></nav-view>
		<view class="page-conte is-flex">
			<view class="title-h2">
				<image class="icon" src="../../static/images/title-zxly.png" mode=""></image>
				<text class="pt">权威律师 极速回复</text>
			</view>
			<!-- <div class="staice-box is-flex" :style="'top:' + (statusBarHeight+57) + 'px'">
				<text class="msg">您有正在进行中的留言</text>
				<i class="iconfont icon-jinruliuyan-01"></i>
			</div> -->
			<view class="message-box">
				<scroll-view class="scroll-view" scroll-y="true">
					<view class="list-view-box">
						<view class="msg-item" v-for="(item,index) in list" :key="index">
							<view class="item-right" v-if="item.roll =='mine'">
								<view class="message-conte">
									<view class="msg" v-if="item.message">
										{{item.message}}
									</view>
									<view class="msg-img" v-if="item.image" @click="previewImage(item)">
										<image :src="item.image" mode="widthFix"></image>
									</view>
									<view class="time">
										{{item.time}}
									</view>
								</view>
							</view>
							<view class="item-left is-flex" v-else>
								<img class="user-header" :src="item.headerImg" alt="" v-if="item.headerImg">
								<img class="user-header" src="@/static/images/icon-header.png" alt="" v-else>
								<view class="he-right-box">
									<view class="name">
										{{item.name}}
									</view>
									<view class="message-conte">
										<view class="msg">
											{{item.message}}
										</view>
										<view class="time">
											{{item.time}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bottom-maright u-fixed-b"></view>
		<!-- 底部输入框  :style="{bottom:bottom}"-->
		<view class="bottom-box u-fixed-b">
			<view class="massage-send-box is-flex">
				<view class="img-btn" @click="touchImg">
					<img src="@/static/images/icon-img.png" alt="">
				</view>
				<input class="input" type="text" v-model="msg" cursor-spacing="20" placeholder="请输入">
				<view class="send-btn" @click="submit">发送</view>
			</view>
		</view>
		
		<!-- 获取手机号码 -->
		<u-transition mode="slide-bottom" :show="isShowPop" duration="300" timingFunction="ease">
			<view class="pop-view">
				<view class="pop-conte u-fixed-b">
					<view class="name-box is-flex">
						<img class="icon" src="@/static/images/icon-header.png" alt="">
						<text>深圳市金盾法律服务有限公司</text>
						<text>申请</text>
					</view>
					<view class="massage-pt-box">
						发送一次以下信息
					</view>
					<view class="massage-conte ">
						<view class="massage-v1 is-flex">
							<text>18682000000</text>
							<text class="mt">微信绑定手机号</text>
						</view>
						<view class="massage-v2">
							使用其他手机号
						</view>
					</view>
					<view class="btn-box is-flex">
						<view class="btn" @click="close">取消</view>
						<view class="btn btn1" @click="comfire">确定</view>
					</view>
				</view>
			</view>
		</u-transition>
		<!-- 授权消息推送 -->
		<u-transition mode="slide-bottom" :show="isShowMsg" duration="300" timingFunction="ease">
			<view class="pop-view">
				<view class="pop-conte u-fixed-b">
					<view class="name-box is-flex">
						<img class="icon" src="@/static/images/icon-header.png" alt="">
						<text>深圳市金盾法律服务有限公司</text>
						<text>申请</text>
					</view>
					<view class="massage-pt-box">
						发送一次以下信息
					</view>
					<view class="massage-conte ">
						<view class="massage-v1 is-flex">
							<img class="icon" src="@/static/images/icon-select2.png" alt="">
							<text>资讯回复提醒</text>
						</view>
						
					</view>
					<view class="btn-box is-flex">
						<view class="btn" @click="close">取消</view>
						<view class="btn btn1" @click="comfire">确定</view>
					</view>
				</view>
			</view>
		</u-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [{
				// 		roll: 'mine',
				// 		message: '您好，我有问题想请教一下',
				// 		image: '',
				// 		time: '17:59'
				// 	},
				// 	{
				// 		roll: 'he',
				// 		message: '您好，我有问题想请教一下',
				// 		image: '',
				// 		time: '17:59',
				// 		name: '金盾法律-张三',
				// 		headerImg: require('@/static/images/icon-header.png')
				// 	},
				// 	{
				// 		roll: 'mine',
				// 		message: '',
				// 		image: require('@/static/images/icon-img.png'),
				// 		time: '17:59'
				// 	},
				// 	{
				// 		roll: 'he',
				// 		message: '您想和家里人商量一下，我也非常能理解，但是您家人可能对我们也不太了解，对咱们沟通的细节也没有体感，如果方便，你们沟通后，我也可以和您的家人再次沟通一下。',
				// 		image: '',
				// 		time: '17:59',
				// 		name: '金盾法律-张三',
				// 		headerImg: require('@/static/images/icon-header.png')
				// 	},
				// ],
				list:[],
				bottom: 0,
				tempImgList:'',
				imageList:[],
				isShowPop:false,
				isShowMsg:false,
				statusBarHeight: getApp().globalData.statusBarHeight,
				sendTitle:'',
				consultId:0,
				msgType:"text",
				msg:'',
				article_id:0,
				image:'',
				postMsg:''
			}
		},

		onLoad(e) {
			this.msg = e.title;
			this.article_id = e.article_id;
			this.consultId = e.consultId;
			uni.onKeyboardHeightChange((res) => { //监听键盘高度变化
				const res_keyboard = uni.getSystemInfoSync();
				let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight + res_keyboard
					.safeAreaInsets.bottom)
				this.bottom = `${ key_height ? key_height : 0}px`;
			})
			if(this.consultId != undefined && this.consultId != null && this.consultId != 0){
				this.getData();
			}
			
		},
		onHide() {
			uni.offKeyboardHeightChange(); //取消监听键盘高度变化事件，避免内存消耗
		},
		methods: {
			getData(){
				let self = this;
				self.isloadding = true;
				self._get('consult.consult/getMessageByConsultId', {consultId:self.consultId}, function(res) {
					
					self.list = res.data.list;
					
					self.loadding = false;
					uni.stopPullDownRefresh();
					self.isloadding = false;
				});
			},
			touchImg() {
				var _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', "camera"], //从相册选择 、使用相机
					success(res) {
						// console.log("++res++ " + JSON.stringify(res.tempFilePaths))
						// _this.tempImgList = res.tempFilePaths
						// _this.imageList = _this.imageList.concat(_this.tempImgList)
						
						console.log(res.tempFiles)
						let fileList = res.tempFiles;
						
						let tempF = [];
						res.tempFiles.forEach((item, index) => {
							tempF.push(item.path);
							
						})
						_this.uploadFile(tempF);
						
						
					}
				})
			},
			uploadFile: function(tempList) {
				let self = this;
				let i = 0;
				let img_length = tempList.length;
				let params = {
					token: uni.getStorageSync('token'),
					app_id: self.getAppId()
				};
				
				console.log(tempList);
			
				tempList.forEach(function(filePath, fileKey) {
					uni.uploadFile({
						url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
						filePath: filePath,
						name: 'iFile',
						formData: params,
						success: function(res) {
							let result = typeof res.data === 'object' ? res.data : JSON.parse(res
								.data);
							
							console.log(result);
							
							if (result.code === 1) {
								self.image = result.data.file_path;
								self.submitPic();
								// self.imageList = self.imageList.concat(result.data.file_path);
							} else {
								uni.showModal({
									title: '提示',
									content: result.msg,
									showCancel:false,
									success: function (res) {
										
									}
								});
							}
			
						},
						complete: function() {
							i++;
							if (img_length === i) {
								uni.hideLoading();
							}
						}
					});
				});
			},
			close(){
				this.isShowPop = false
				this.isShowMsg = false
			},
			comfire(){
				console.log('确定')
				this.isShowPop = false
			},
			submit(){
				let self = this;
				self.msgType = 'text';
				self.doSubmit();
			},
			submitPic(){
				let self = this;
				self.msgType = 'image';
				self.doSubmit();
			},
			doSubmit(){
				let self = this;
				if(self.msgType == 'text' && self.msg == ''){
					uni.showModal({
						title: '提示',
						content: '请输入内容',
					});
					return;
				}
				self._post(
					'consult.consult/sendMsg',
					{
						consultId: self.consultId,
						type:self.msgType,
						msg:self.msg,
						article_id:self.article_id,
						image:self.image
					},
					function(res) {
						if(res.code == 2){
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel:false,
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack();
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							self.consultId = res.data.consultId;
							self.list = res.data.list;
							self.msg = '';
							self.image = '';
						}
						
					}
				);
			},
			previewImage(event) {
				var url = event.image;
				uni.previewImage({
					urls: [url] // 需要预览的图片 http 链接列表
			
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.page-view {
		width: 100%;
		height: 100%;
		flex-direction: column;
	}

	.page-conte {
		width: 100%;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.title-h2 {
		width: 100%;
		padding: 0 40rpx;
	}

	.title-h2 .icon {
		width: 239rpx;
		height: 86rpx;
	}

	.title-h2 .pt {
		display: block;
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #666666;
	}

	.page-conte {
		// padding:20rpx ;
	}

	.staice-box {
		position: fixed;
		right: 0;
		top: 150rpx;
		line-height: 80rpx;
		background: #DF6919;
		box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(150, 65, 8, 0.25);
		padding: 0 30rpx;
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #FFFFFF;
		border-radius: 40rpx 0 0 40rpx;
		z-index: 99;

	}

	.staice-box .iconfont {
		font-size: 46rpx;
		width: 32rpx;
	}

	.message-box {
		flex: 1;
		width: 100%;
		overflow: hidden;
	}

	.scroll-view {
		width: 100%;
		height: 100%;
		padding: 40upx;
		box-sizing: border-box;
	}

	.msg-item::after {
		display: block;
		content: '';
		clear: both;
		margin-top: 40rpx;
	}

	.item-right {
		float: right;
		width: 71%;
		justify-content: flex-end;
	}

	.item-left {
		float: left;
		width: 80%;
		justify-content: flex-start;
		align-items: initial;
	}

	.user-header {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.he-right-box {
		flex: 1;
	}

	.message-conte {
		padding: 40rpx;
		box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(35, 45, 167, 0.2);
		margin-bottom: 40rpx;
	}

	.message-conte .time {
		margin-top: 20rpx;
		color: #999999;
	}

	.item-left .message-conte {
		background: #FFFFFF;
		border-radius: 0rpx 40rpx 40rpx 40rpx;
		border: 1rpx solid #CCDCF8;
		margin-top: 20rpx;
	}

	.item-right .message-conte {
		background: #232DA7;
		box-shadow: 0rpx 4rpx 8rpx 1rpx rgba(35, 45, 167, 0.2);
		border-radius: 40rpx 0rpx 40rpx 40rpx;
		color: #fff;
	}

	.item-right .message-conte .time {
		text-align: right;
	}

	.msg-img image {
		width: 100%;
	}

	.bottom-maright {
		padding-top: 90rpx;
	}

	// 底部
	.bottom-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 1rpx rgba(0, 0, 0, 0.16);
		z-index: 999;
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	}

	.massage-send-box {
		width: 100%;
		padding: 34rpx 40rpx;
	}

	.img-btn img {
		display: block;
		width: 80rpx;
		height: 80rpx;
	}

	.send-btn {
		width: 144rpx;
		line-height: 80rpx;
		text-align: center;
		background: #232DA7;
		font-size: 32rpx;
		color: #fff;
		border-radius: 10rpx;
	}

	.massage-send-box .input {
		flex: 1;
		height: 80rpx;
		background: #F3F3F3;
		margin: 0 20rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
	
	// 弹框
	.pop-view {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.7);
	}
	.pop-conte {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 40rpx;
		background-color: #000;
	}
	.name-box {
		justify-content: flex-start;
		font-size: 26rpx;
		color: #fff;
	}
	.name-box text {
		display: block;
		margin-right: 10rpx;
	}
	.name-box .icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 15rpx;
	}
	.massage-pt-box {
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.massage-conte {
		margin-top: 40rpx;
		font-size: 30rpx;
		color: rgba(255,255,255,0.7);
		min-height: 200rpx;
	}
	.massage-v1 {
		justify-content: flex-start;
	}
	.massage-v1 .icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 24rpx;
	}
	.massage-v1 .mt {
		font-size: 25rpx;
		color: rgba(255,255,255,0.3);
		margin-left: 20rpx;
	}
	.massage-v2 {
		margin-top: 40rpx;
		font-size: 25rpx;
		color: #7D90A9;
	}
	.btn-box {
		justify-content: center;
		margin-top: 20rpx;
	}
	.btn-box .btn {
		width: 217rpx;
		height: 73rpx;
		background: rgba(255,255,255,0.08);
		border-radius: 3rpx;
		line-height: 73rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		margin: 0 20rpx;
	}
	.btn-box .btn1 {
		background-color: #07C160;
		color: #fff;
	}
	
</style>
